<style scope>
  .picImg {
    width: 40px;
    height: 40px;
  }

  .input-unit {
    position: relative;
    top: -32px;
    left: 304px;
  }

  .el-dialog {
    width: 1100px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="feedetailChildAdd">新增
        </el-button>
      </div>
      <el-table v-loading="feedetailistLoading" :data="feedetailist" element-loading-text="正在查询中。。。" border fit
                highlight-current-row :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <!-- <el-table-column fixed align="center" min-width="100" label="费用ID号" prop="id"/> -->
        <!-- <el-table-column align="center" min-width="100" label="渠道费用ID" prop="feeID"/> -->
        <el-table-column align="center" min-width="150" label="区间下限" prop="minLimit"/>
        <el-table-column align="center" min-width="150" label="区间上限" prop="maxLimit"/>
        <el-table-column align="center" min-width="150" label="手续费" prop="fee"/>
        <el-table-column align="center" min-width="150" label="单笔最小费用(元)" prop="minFee"/>
        <el-table-column align="center" min-width="150" label="单笔最大费用(元)" prop="maxFee"/>
        <el-table-column fixed="right" align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="feedetaiChildEdit(scope.row)">编辑
            </el-button>
            <el-popover
            placement="top"
            width="200"
            trigger="manual"
            :ref="'popover-' + scope.row.id">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="dofeedateilDelete(scope.row)">确定</el-button>
            </div>
              <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.id].doShow()">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getfeedetaiList"/>
        <!--增加费用明细对话框-->
        <el-dialog :visible.sync="feedetailistDialogChildVisible" :title="textMap[dialogStatus]" append-to-body :close-on-click-modal="false">
          <el-form ref="feedetailChildForm" :rules="feedetailChildFormRules" :model="feedetailChildForm" status-icon
                   label-position="right"
                   label-width="130px" style="width: 400px; margin-left:50px;">
            <!-- <el-form-item label="渠道编号" prop="channelNo">
              <el-input v-model="editChildForm.channelNo" placeholder="渠道编号"/>
            </el-form-item> -->
            <el-form-item label="区间下限" prop="minLimit">
              <el-input v-model="feedetailChildForm.minLimit" placeholder="区间下限"/>
            </el-form-item>
            <el-form-item label="区间上限" prop="maxLimit">
              <el-input v-model="feedetailChildForm.maxLimit" placeholder="区间上限"/>
            </el-form-item>
            <el-form-item label="手续费" prop="fee">
              <el-input v-model="feedetailChildForm.fee" placeholder="手续费"/>
            </el-form-item>
            <el-form-item label="单笔最小费用" prop="minFee">
              <el-input v-model="feedetailChildForm.minFee" placeholder="单笔最小费用"/>
            </el-form-item>
            <el-form-item label="单笔最大费用" prop="maxFee">
              <el-input v-model="feedetailChildForm.maxFee" placeholder="单笔最大费用"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="feedetailistDialogChildVisible = false">取消</el-button>
            <el-button v-if="dialogStatus=='create'" type="primary" @click="dofeelCreate">确定</el-button>
            <el-button v-else type="primary" @click="doChildfeeEdit">确定</el-button>
          </div>
        </el-dialog>
      </el-table>
    </div>

  </div>
</template>

<script>
  import { doGet, doPost } from '@/api'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkPermission from '@/utils/permission' // 权限判断函数
  export default {
    name: 'bank',
    components: { Pagination },
    filters: { },
    data() {
      return {
        textMap: {
          update: '编辑',
          create: '创建'
        },
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 20
        },
        dialogStatus: undefined,
        feedetailistLoading: false, // 查看费用明细列表loading标志
        feedetailist: [], // 费用明细列表数据
        feedetailistDialogChildVisible: false, // 增加费用明细对话框显示标志
        // 费用明细列表
        feedetailChildForm: {
          id: undefined,
          feeID: undefined,
          minLimit: undefined,
          maxLimit: undefined,
          fee: undefined,
          minFee: undefined,
          maxFee: undefined
        },
        feedetailChildFormRules: {
          // feeID: [{required: true, message: '渠道费用ID不允许为空', trigger: 'blur'}],
          // minLimit: [{required: true, message: '区间下限不允许为空', trigger: 'blur'}],
          // maxLimit: [{required: true, message: '区间上限不允许为空', trigger: 'blur'}],
          fee: [{ required: true, message: '手续费不允许为空', trigger: 'blur' }]
          // minFee: [{required: true, message: '单笔最小费用不允许为空', trigger: 'blur'}],
          // maxFee: [{required: true, message: '单笔最大费用不允许为空', trigger: 'blur'}],
        }
      }
    },
    created() {
      if (this.$route.query.id == null) {
        return
      }
      const id = this.$route.query.id
      this.getfeedetaiList(id)
    },
    methods: {
      checkPermission,
      // 获取费用明细列表
      getfeedetaiList(id) {
        this.feedetailistLoading = true
        doGet('channel.html?op=feedetaillist', { id }).then(response => {
          this.feedetailist = response.rows
          this.total = response.rows.length
          this.feedetailistLoading = false
        }).catch(() => {
          this.feedetailist = []
          this.total = 0
          this.feedetailistLoading = false
        })
      },
      // 新增费用明细
      feedetailChildAdd() {
        this.feedetailChildForm = {
          feeID: this.$route.query.id,
          minLimit: undefined,
          maxLimit: undefined,
          fee: undefined,
          minFee: undefined,
          maxFee: undefined
        },
          this.dialogStatus = 'create'
          this.feedetailistDialogChildVisible = true
          this.$nextTick(() => {
          this.$refs['feedetailChildForm'].clearValidate()
        })
      },
      /**确定添加费用明细 */
      dofeelCreate() {
        this.$refs['feedetailChildForm'].validate(valid => {
          if (valid) {
            doGet('channel.html?op=addfeedetail', { feeID: this.$route.query.id, ...this.feedetailChildForm })
              .then(response => {
                this.getfeedetaiList( this.$route.query.id )
                this.feedetailistDialogChildVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '添加成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      /**修改 */
      doChildfeeEdit() {
        this.$refs['feedetailChildForm'].validate(valid => {
          if (valid) {
            doGet('channel.html?op=chgfeedetail', this.feedetailChildForm)
              .then(response => {
                this.feedetailistDialogChildVisible = false
                this.feedetailist[this.feedetaIndex] = this.feedetailChildForm
                this.$notify.success({
                  title: '成功',
                  message: '修改成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      /**编辑费用明细 */
      feedetaiChildEdit(row) {
        this.feedetailChildForm = Object.assign({}, row)
        this.feedetaIndex = this.feedetailist.indexOf(row)
        this.dialogStatus = 'update'
        this.feedetailistDialogChildVisible = true
        this.$nextTick(() => {
          this.$refs['feedetailChildForm'].clearValidate()
        })
      },
      /**删除费用明细 */
      dofeedateilDelete(row) {
        doGet('channel.html?op=delfeedetail', row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.feedetailist.indexOf(row)
            this.feedetailist.splice(index, 1)
            this.total--
            this.$refs[`popover-` + row.id].doClose()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      }

    }
  }
</script>
